<script setup lang="ts">
import { ref, reactive } from 'vue'

// 文本插值示例
const message = ref('Hello Vue!')
const rawHtml = ref('<span style="color: red">这是红色文本</span>')

// 属性绑定示例
const id = ref('dynamic-id')
const isButtonDisabled = ref(false)
const objectOfAttrs = reactive({
  id: 'container',
  class: 'wrapper'
})

// 表达式示例
const number = ref(1)
const ok = ref(true)
const items = reactive(['苹果', '香蕉', '橙子'])
const object = reactive({
  title: '标题',
  author: '作者',
  publishedAt: '2024-01-01'
})

// 事件处理示例
const count = ref(0)
const increment = (step: number) => {
  count.value += step
}

const handleSubmit = (event: Event) => {
  event.preventDefault()
  alert('表单提交')
}

// 表单绑定示例
const text = ref('')
const checked = ref(false)
const checkedNames = ref<string[]>([])
const picked = ref('')
const selected = ref('')
const multiSelected = ref<string[]>([])
</script>

<template>
  <div class="template-syntax">
    <h2>模板语法示例</h2>

    <section>
      <h3>1. 文本渲染</h3>
      <!-- 文本插值 -->
      <p>消息: {{ message }}</p>
      <!-- 原始 HTML -->
      <p>使用 v-html: <span v-html="rawHtml"></span></p>
    </section>

    <section>
      <h3>2. 属性绑定</h3>
      <!-- 动态属性 -->
      <div :id="id">动态 ID</div>
      <button :disabled="isButtonDisabled">按钮</button>
      <!-- 绑定多个属性 -->
      <div v-bind="objectOfAttrs" >多属性绑定</div>
    </section>

    <section>
      <h3>3. JavaScript 表达式</h3>
      <p>{{ number + 1 }}</p>
      <p>{{ ok ? '是' : '否' }}</p>
      <p>{{ message.split('').reverse().join('') }}</p>
    </section>

    <section>
      <h3>4. 事件处理</h3>
      <p>计数: {{ count }}</p>
      <button @click="increment(1)">+1</button>
      <button @click="increment(2)">+2</button>
      <!-- 事件修饰符 -->
      <form @submit.prevent="handleSubmit">
        <button type="submit">提交表单</button>
      </form>
    </section>

    <section>
      <h3>5. 表单绑定</h3>
      <!-- 文本框 -->
      <div>
        <input v-model="text" placeholder="输入文本">
        <p>输入的文本: {{ text }}</p>
      </div>

      <!-- 复选框 -->
      <div>
        <input type="checkbox" v-model="checked">
        <label>{{ checked ? '已选中' : '未选中' }}</label>
      </div>

      <!-- 多个复选框 -->
      <div>
        <input type="checkbox" v-model="checkedNames" value="张三">
        <label>张三</label>
        <input type="checkbox" v-model="checkedNames" value="李四">
        <label>李四</label>
        <p>选中的名字: {{ checkedNames }}</p>
      </div>

      <!-- 单选按钮 -->
      <div>
        <input type="radio" v-model="picked" value="A">
        <label>选项 A</label>
        <input type="radio" v-model="picked" value="B">
        <label>选项 B</label>
        <p>选中的选项: {{ picked }}</p>
      </div>

      <!-- 选择框 -->
      <div>
        <select v-model="selected">
          <option value="">请选择</option>
          <option value="A">选项 A</option>
          <option value="B">选项 B</option>
          <option value="C">选项 C</option>
        </select>
        <p>选择的值: {{ selected }}</p>
      </div>

      <!-- 多选选择框 -->
      <div>
        <select v-model="multiSelected" multiple>
          <option value="A">选项 A</option>
          <option value="B">选项 B</option>
          <option value="C">选项 C</option>
        </select>
        <p>多选的值: {{ multiSelected }}</p>
      </div>
    </section>
  </div>
</template>

<style scoped>
.template-syntax {
  padding: 20px;
}

section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

button {
  margin: 0 5px;
  padding: 5px 15px;
}

input, select {
  margin: 5px;
}

label {
  margin-right: 10px;
}
</style> 